<template>
    <div>
        <mj-title type="h2" title="Switch 开关"></mj-title>
        <div class="page-desc">在两种状态间切换时用到的开关选择器。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-switch v-model="checked" :change="change" ></mj-switch>
                <span class="gray9 ml20">选中状态：{{checked}}</span>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-switch v-model="checked" :change="change" >&lt;/mj-switch>
                    &lt;/template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    checked: false,
                                }
                            },
                            methods: {
                                change(val){
                                    console.log(val)

                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="禁用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-switch v-model="checked2" :disabled="disabled"></mj-switch>
                <mj-switch v-model="checked" :disabled="disabled"></mj-switch>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-switch v-model="checked2" :disabled="disabled">&lt;/mj-switch>
                        &lt;mj-switch v-model="checked" :disabled="disabled">&lt;/mj-switch>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    checked: false,
                                    checked2: true,
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="尺寸"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-switch v-model="checked2" size="large"></mj-switch>
                <mj-switch v-model="checked2"></mj-switch>
                <mj-switch v-model="checked2" size="small"></mj-switch>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-switch v-model="checked2" size="large">&lt;/mj-switch>
                        &lt;mj-switch v-model="checked2">&lt;/mj-switch>
                        &lt;mj-switch v-model="checked2" size="small">&lt;/mj-switch>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    checked2: true,
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义显示文本"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-switch v-model="checked2" size="large">
                    <span slot="open">ON</span>
                    <span slot="close">OFF</span>
                </mj-switch>
                <mj-switch v-model="checked2" size="large">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </mj-switch>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-switch v-model="checked2" size="large">
                            &lt;span slot="open">ON&lt;/span>
                            &lt;span slot="close">OFF&lt;/span>
                        &lt;/mj-switch>
                        &lt;mj-switch v-model="checked2" size="large">
                            &lt;span slot="open">开启&lt;/span>
                            &lt;span slot="close">关闭&lt;/span>
                        &lt;/mj-switch>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    checked2: true,
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义颜色"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
                <mj-switch v-model="checked2" true-color="#13ce66" false-color="#f00" ></mj-switch>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
                <pre>
                    <code class="language-html line-numbers">
                    &lt;template>
                        &lt;mj-switch v-model="checked2" true-color="#13ce66" false-color="#f00" >&lt;/mj-switch>
                    &lt;template>
                    &lt;script>
                        export default {
                            data () {
                                return {
                                    checked2: true,
                                }
                            },
                        }
                    &lt;/script>
                    </code>
                </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Switch 参数"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>v-model</td>
                    <td>指定当前是否选中</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>开关的尺寸，可选值为<code>large</code>、<code>small</code>。建议开关如果使用了2个汉字的文字，使用 large。</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>禁用开关</td>
                    <td>Boolean</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>true-color</td>
                    <td>自定义打开时的背景色</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>false-color</td>
                    <td>自定义关闭时的背景色</td>
                    <td>String</td>
                    <td>-</td>
                </tr>
            </tbody>
        </table>
        
        <mj-title type="h6" title="Switch 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>开关变化时触发，返回当前的状态</td>
                    <td>true | false</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                checked: false,
                checked2: true,
                disabled: true
            }
        },
        methods: {
            change(val){
                console.log(val)
            },
        },
    }
</script>

<style scoped>
.mj-switch + .mj-switch {margin-left: 20px;}
</style>